<!DOCTYPE html>
<html>
<head>
	<title>PreloadJS: Queue Example</title>

    <!-- <script type="text/javascript" src="/js/preloadjs/AbstractLoader.js"></script>
    <script type="text/javascript" src="/js/preloadjs/PreloadJS.js"></script>
    <script type="text/javascript" src="/js/preloadjs/TagLoader.js"></script>
    <script type="text/javascript" src="/js/preloadjs/XHRLoader.js"></script> -->
    <script type="text/javascript" src="/js/preloadjs/preload.js"></script>
    
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	
    <script type="text/javascript" src="./assets/preloadQueue.js"></script>

	<link rel="stylesheet" type="text/css" href="./assets/demoStyles.css" />
	<style type="text/css">
		#template {
			display:none;
		}

		#mainProgress {
			width: auto;
			height: 20px;
			float: none;
			position: relative;
		}
		#mainProgress LABEL { position: absolute; }

		.item {
			height: 170px;
			width: 238px;
			border: 1px solid #eee;
			background-color: #ddd;
			padding: 2px;
			float:left;
			position: relative;
			text-align: center;
		}
		.item .progress {
			width: 0;
			height: 20px;
			background-color: #9c9;
			bottom: 0;
		}
		.complete {}
		.error {
			background-color: #FAA;
		}
		.complete DIV, .error DIV { display: none; }
	</style>
</head>
<body onload="init()">

	<header id="header" class="PreloadJS">
	    <h1><span class="text-product">Preload<strong>JS</strong></span> Preload Queue</h1>
	    <p>Click "load another" to add another image the the overall queue. As images are added, the preload progress reflects the overall loaded progress. Click "load all" to queue everything at once.</p>
	</header>

	<div id="container" class="content">
		<input type="button" id="loadAnotherBtn" value="Load Another" disabled="disabled" />
		<input type="button" id="loadAllBtn" value="Load All" disabled="disabled" />
		<input type="button" id="reloadBtn" value="Reset" />
		<div id="mainProgress" class="item">
			<label>Overall Progress</label><div class="progress"></div>
		</div>
		<hr />
		<!-- New items will get placed here -->
	</div>

	<!-- Item Template. This is cloned whenever we want a new one. -->
	<div id="template" class="item">
		<div class="progress"></div>
	</div>

</body>
</html>